<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>接口文档</title>

    <link href="css/layout.css" rel="stylesheet">
    <link href="css/main.css" rel="stylesheet">
    <link href="js/iview/styles/iview.css" rel="stylesheet">
    <link href="js/highlight/default.min.css" rel="stylesheet">
    <link href="css/markdown.css" rel="stylesheet">

    <script src="js/vue/vue.min.js"></script>
    <script src="js/iview/iview.min.js"></script>
    <script src="js/highlight/highlight.min.js"></script>
    <script src="js/markdown-it/markdown-it.min.js"></script>
    <script src="js/axios/axios.min.js"></script>


</head>
<body>
<div id="app">
    <div class="main">
        <div class="main_inner">
        	<!--
            <div class="sidebar">
                <div class="sidebar-tab">
                    <ul>
                    </ul>
                </div>
                <div class="sidebar-tab-more" id="tab-more">
                </div>
            </div>
            -->
            <!--begin panel-->
            <div class="panel">
                <!--begin header-->
                <div class="header">
                    <div class="avatar">
                    </div>
                    <div class="info">
                        <h3 class="nickname">
                        </h3>
                    </div>
                </div>
                <!--end header-->
                <div class="search_bar">
                    <i class="oim_chat_search"></i>
                    <input @keyup="onSearchChange" v-model="searchText" class="frm_search compatible" type="text"
                           placeholder="搜索">
                    <i v-if="showPane" @click="clearSearch" class="search_bar_close"></i>
                    <div v-if="showPane" style="top:50px" class="popup recommendation"
                         tabindex="-1">
                        <div style="position: relative;">
                            <div class="contacts scrollbar-dynamic scroll-content"
                                 style="margin-bottom: 0px; margin-right: 0px;overflow-y:auto">
                                <div class="contact_list ">
                                    <div class="top-placeholder " style="height: 0px;"></div>
                                    <div class="">
                                        <div class="">
                                            <h4 class="contact_title">接口</h4>
                                        </div>
                                        <div class="">
                                            <ul>
                                                <li class="contact_item" v-for="item of showList"
                                                    @click="setAction(item)">{{item.title}}
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <div class="bottom-placeholder"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--begin tab-->
                <div class="tab" style="padding-bottom: 16px;">

                </div>
                <!--begin nav view-->
                <div class="nav_view" style="visibility: visible; width: auto;padding-left: 15px">
                    <div class="scroll-wrapper contact_list scrollbar" style="overflow-y:auto;height: 100%">
                    	<Tree :data="indexTree" @on-select-change="onIndexSelect"></Tree>
                        <Tree :data="actionTree" @on-select-change="onModuleSelect"></Tree>
                    </div>
                </div>
                <!--end nav view-->
            </div>
            <!--end panel-->
            <div class="" style="height:100%; background-color: rgba(250,250,250,0.6);">
                <div class="box">
                    <div class="box_hd with_border">
                        <div class="title_wrap">
                            <div class="title">详细信息</div>
                        </div>
                    </div>
                    <div class="box_bd" class="scroll-wrapper contact_list scrollbar"
                         style="overflow-y:auto;">
                        <Card style="width:100%">
                            <p slot="title">
                                <Icon type="ios-film-outline"></Icon>
                                {{action.title}}
                            </p>
                            <dev slot="extra">
                                <Button @click="showMarkdown = true" type="info" icon="ios-search">查看Markdown</Button>
                            </dev>
                            <div v-highlight>
                                <div class="markdown" class="markdown" v-html='action.content'></div>
                            </div>
                        </Card>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <Drawer title="Markdown" width="60%" :closable="false" v-model="showMarkdown">
        <textarea readonly style="width:100%;height: 100%">{{action.markdown}}</textarea>
    </Drawer>
</div>
<script>
    let http = {};
    http.get = function (url, params, back) {
        axios.get(url, params)
            .then(function (response) {
                if (back) {
                    if (typeof (back) === 'function') {
                        let data = response.data;
                        let value = (typeof (data) === 'string') ? data = JSON.parse(data) : data;
                        back(value);
                    }
                }
            })
            .catch(function (error) {

            });
    }
</script>
<script>
    let md = window.markdownit();
    md.options.html=true;

    let highlight = {};
    // 自定义插件
    highlight.install = function (Vue) {
        // 自定义指令 v-highlight
        Vue.directive('highlight', {
            // 被绑定元素插入父节点时调用
            inserted: function (el) {
                let blocks = el.querySelectorAll('pre code');
                for (let i = 0; i < blocks.length; i++) {
                    hljs.highlightBlock(blocks[i]);
                }
            },
            // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
            componentUpdated: function (el) {
                let blocks = el.querySelectorAll('pre code');
                for (let i = 0; i < blocks.length; i++) {
                    hljs.highlightBlock(blocks[i]);
                }
            }
        })
    };
    Vue.use(highlight);

    new Vue({
        el: '#app',
        data: {
            isCollapsed: false,
            showMarkdown: false,
            showPane: false,
            action: {
                content: '',
                title: '',
                markdown: '',
            },
            indexTree: [],
            actionTree: [],
            showList: [],
            searchText: ''
        },
        computed: {
            text() {
                return this.getHtml(this.action.content);
            },
            menuitemClasses: function () {
                return [
                    'menu-item',
                    this.isCollapsed ? 'collapsed-menu' : ''
                ]
            }
        },
        methods: {
            show: function () {
                this.visible = true;
            },
            getHtml: function (text) {
                let result = md.render(text);
                return result;
            },
            setAction(data) {
                let own = this;
                if (data) {
                    if (typeof (data) == 'object') {
                        let markdown = data.content;
                        let title = data.title;
                        if (markdown) {
                            let content = own.getHtml(markdown);
                            own.action.content = content;
                            own.action.title = title;
                            own.action.markdown = markdown;
                        }
                    }
                }
            },
            onSearchChange() {
                const text = this.searchText;
                if (text !== '') {
                    this.showPane = true;
                    this.actionListByText(text);
                } else {
                    this.showPane = false;
                }
            },
            clearSearch() {
                this.searchText = '';
                this.showPane = false;
            },
            onModuleSelect(nodes, node) {
                if (node.action) {
                    let key = node.key;
                    this.loadAction(key);
                }
            },
            onIndexSelect(nodes, node) {
                if (node.action) {
                    let key = node.key;
                    this.loadIndex(key);
                }
            },
            loadActionTreeRoot() {
                let own = this;
                http.get('/doc/module.tree.root', null, function (data) {
                    if (data) {
                        if (typeof (data) == 'object') {
                            own.actionTree = data;
                        }
                    }
                });
            },
            loadAction(key) {
                if (key) {
                    let own = this;
                    http.get('/doc/action.get.by.key/' + key, null, function (data) {
                        own.setAction(data);
                    });
                }
            },
            actionListByText(text) {
                if (text) {
                    let own = this;
                    http.get('/doc/action.list.by.text/' + text, null, function (list) {
                        own.showList = list;
                    });
                }
            },
            loadIndexTreeRoot() {
                let own = this;
                http.get('/doc/index.tree.root', null, function (data) {
                    if (data) {
                        if (typeof (data) == 'object') {
                            own.indexTree = data;
                        }
                    }
                });
            },
            loadIndex(key) {
                if (key) {
                    let own = this;
                    http.get('/doc/index.get.by.key/' + key, null, function (data) {
                        own.setAction(data);
                    });
                }
            }
        }, mounted() {
            this.loadIndexTreeRoot();
            this.loadActionTreeRoot();
        }
    })
</script>
<style scoped>
    html, body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    #app {
        width: 100%;
        height: 100%;
        border-radius: 4px;
    }

    .layout {
        width: 100%;
        height: 100%;
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    .layout-header-bar {
        background: #fff;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
    }

    .layout-con {
        height: 100%;
        width: 100%;
    }

    .menu-item span {
        display: inline-block;
        overflow: hidden;
        width: 69px;
        text-overflow: ellipsis;
        white-space: nowrap;
        vertical-align: bottom;
        transition: width .2s ease .2s;
    }

    .menu-item i {
        transform: translateX(0px);
        transition: font-size .2s ease, transform .2s ease;
        vertical-align: middle;
        font-size: 16px;
    }

    .collapsed-menu span {
        width: 0px;
        transition: width .2s ease;
    }

    .collapsed-menu i {
        transform: translateX(5px);
        transition: font-size .2s ease .2s, transform .2s ease .2s;
        vertical-align: middle;
        font-size: 22px;
    }
</style>
</body>

</html>